import { useEffect, useState } from 'react';
import css from './index.less';
interface menuType {
  name: string;
  is: number;
  path: string;
}

const Menu = (props: any) => {
  const { history } = props;
  const { location } = history;
  const { pathname } = location;
  const [list, setlist] = useState<menuType[]>([
    {
      name: '首页',
      is: 1,
      path: '/home',
    },
    {
      name: '文章',
      is: 0,
      path: 'article',
    },
    {
      name: '关于',
      is: 0,
      path: 'about',
    },
    {
      name: '留言',
      is: 0,
      path: 'mail',
    },
  ]);
  useEffect(() => {
    if (pathname) {
      list.forEach((item: menuType) => {
        if (pathname.indexOf(item.path) !== -1) {
          item.is = 1;
        } else {
          item.is = 0;
        }
      });
      setlist([...list]);
    }
  }, [pathname]);
  return (
    <div className={css.menu}>
      {list.map((item: menuType) => {
        return (
          <div
            className={css.title}
            key={item.path}
            onClick={() => history.push(item.path)}
          >
            {item.name}
            <div
              className={css.circle}
              style={{ display: `${item.is === 1 ? 'block' : 'none'}` }}
            />
          </div>
        );
      })}
    </div>
  );
};

export default Menu;
